<template>
	<!-- :style="{'--tabbar-height': data.tabBarHeight + 'rpx'}" -->
	<view class="index_cantainer">
		<Forum v-model:reachBottom="data.reachBottom" v-if="data.currentIndex === 0"></Forum>
		<Attention v-model:reachBottom="data.reachBottom" v-if="data.currentIndex === 1"></Attention>
		<News v-model:reachBottom="data.reachBottom" v-if="data.currentIndex === 3"></News>
		<User v-model:reachBottom="data.reachBottom" v-if="data.currentIndex === 4"></User>
	</view>
	<!-- :style="{'height': data.tabBarHeight + 'rpx'}" -->
	<view class="index_tabBar">
		<view class="index_tabBar_btns">
			<template v-for="(item, index) in data.list" :key="index">
				<image :src="data.currentIndex === index ? item.active : item.unActive" class="index_tabBar_btn"
					:class="{ active: newsTotal > 0 && index === 3 }" @click="selBar(index)"></image>
			</template>
		</view>
	</view>

	<view class="index_type" v-if="data.showType">
		<view class="index_type_items" :style="{ bottom: data.tabBarHeight + 64 + 'rpx' }">
			<view class="index_type_item" @click="navGo(1)">
				<image src="../../static/images/index/fb-image.png"></image>
			</view>
			<view class="index_type_item" @click="navGo(2)">
				<image src="../../static/images/index/fb-video.png"></image>
			</view>
		</view>
		<image src="@/static/images/navigation/close.png" :style="{ bottom: data.tabBarHeight - 78 + 'rpx' }"
			class="index_type_close" @click="data.showType = false"></image>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, nextTick, reactive, computed } from 'vue'
	import unActive001 from '@/static/images/index/tabBar_icon001.png'
	import unActive002 from '@/static/images/index/tabBar_icon002.png'
	import unActive003 from '@/static/images/index/tabBar_icon003.png'
	import unActive004 from '@/static/images/index/tabBar_icon004.png'
	import unActive005 from '@/static/images/index/tabBar_icon005.png'
	import active001 from '@/static/images/index/tabBar_icon001_on.png'
	import active002 from '@/static/images/index/tabBar_icon002_on.png'
	import active003 from '@/static/images/index/tabBar_icon003_on.png'
	import active004 from '@/static/images/index/tabBar_icon004_on.png'
	import active005 from '@/static/images/index/tabBar_icon005_on.png'
	import Forum from './components/forum.vue'
	import Attention from './components/attention.vue'
	import News from './components/news.vue'
	import User from './components/user.vue'
	import { onReachBottom } from '@dcloudio/uni-app'
	import { useStore } from '@/store/main'
	import { getArticleId } from '@/api/article'
	import Request from '@/static/network/request'

	const store = useStore()
	const newsTotal = computed(() => {
		return store.getNews.total
	})
	const data = reactive({
		tabBarHeight: 0,
		navigationHeight: 0,
		boxHeight: 0,
		currentIndex: 0,
		list: [
			{ active: active001, unActive: unActive001 },
			{ active: active002, unActive: unActive002 },
			{ active: active003, unActive: unActive003 },
			{ active: active004, unActive: unActive004 },
			{ active: active005, unActive: unActive005 },
		],
		reachBottom: false,
		showType: false,
	})

	const selBar = (index : number) : void => {
		console.log('', index)
		if (index === 2) {
			data.showType = true
		} else {
			data.reachBottom = false
			data.currentIndex = index
		}
	}
	const navGo = (type : number) : void => {
		data.showType = false
		uni.navigateTo({
			url: '/pages/index/add/add?type=' + type,
		})
	}

	onMounted(() => {
		nextTick(() => {
			uni.getSystemInfo({
				success: (result : any) => {
					data.tabBarHeight =
						(result.safeAreaInsets.bottom * 750) / result.screenWidth + 100
				},
			})
			uni.getClipboardData({
				success: (res : any) => {
					uni.hideToast()
					getArticleId({ key: res.data }).then((res : any) => {
						if (res.data.info.type === 1) {
							uni.navigateTo({
								url: '/pages/index/info/text/text?id=' + res.data.info.pid,
							})
						} else {
							uni.navigateTo({
								url: '/pages/index/info/video/video?id=' + res.data.info.pid,
							})
						}
					})
				},
			})
			Request.connectSocket({
				api: '/msg?type=login&uid=' + store.getUserinfo.uid,
				pingData: JSON.stringify({ type: 'ping' }),
				autoConnect: true,
				open: () : void => {
					Request.sendSocketMessage({
						data: JSON.stringify({ type: 'login', uid: store.getUserinfo.uid }),
					})
				},
				on: (result : any) : void => {
					result = JSON.parse(result.data)
					if (result.type === 'message') {
						result.data.total =
							result.data.star_num +
							result.data.comment_num +
							result.data.fans_num +
							result.data.sys_msg_num
						store.saveNews(result.data)
					}
				},
			})
		})
	})
	onReachBottom(() => {
		data.reachBottom = true
	})
</script>

<style lang="scss">
	.index_cantainer {
		--tabbar-height: 0;
		// padding-bottom: var(--tabbar-height);

		padding-bottom: 140rpx;
	}

	.index_tabBar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		width: 100vw;
		background: #ffffff;
		border-top: 2rpx solid #ebeef3;
		height: 140rpx;

		.index_tabBar_btns {
			width: 100vw;
			height: 140rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 56rpx;
			box-sizing: border-box;

			.index_tabBar_btn {
				position: relative;
				width: 56rpx;
				height: 56rpx;

				&.active {
					&::before {
						position: absolute;
						right: 0;
						top: 0;
						content: '';
						width: 16rpx;
						height: 16rpx;
						border-radius: 8rpx;
						background: #f83c1e;
					}
				}
			}
		}
	}

	.index_type {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0%;
		width: 100%;
		height: 100%;
		backdrop-filter: blur(10rpx);
		background: rgba(255, 255, 255, 0.6);

		.index_type_items {
			position: absolute;
			left: 0%;
			width: 750rpx;
			height: 100rpx;
			@include layout(row, center, center);
			gap: 128rpx;
			font-weight: 600;
			line-height: 32rpx;
			font-size: 32rpx;
			.index_type_item:last-child{
				margin-left:80rpx;
			}
			image{
				width:160rpx;
				height:160rpx;
				display: block;
			}
		}

		.index_type_close {
			position: absolute;
			left: 348rpx;
			width: 56rpx;
			height: 56rpx;
		}
	}
</style>